<template>
	<view class="container">
		<!-- 搜索页 -->
		<view class="status_bar"></view>
		<!-- 自定义navbar -->
		<view class="my-navbar">
			<view class="search-input">
				<input focus type="text" placeholder="请输入您要搜索的内容" v-model="searchValue" @confirm="searchFun(1)" @input="inputChange" />
			</view>
			<view class="cancelBox" @click="returnIndex()">
				<text>搜索</text>
				<!-- <button></button> -->
			</view>
			<!-- <image src="../../static/return-icon.png" @click="returnIndex"></image> -->
		</view>
		<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
			<block v-for="(row,index) in keywordList" :key="index">
				<view class="keyword-entry" hover-class="keyword-entry-tap" @tap.stop="setKeyword(row.keyword)">
					<view class="keyword-img">
						<image src="/static/search3.png"></image>
					</view>
					<view class="keyword-text">
						<rich-text :nodes="row.htmlStr"></rich-text>
					</view>
				</view>
			</block>

		</scroll-view>
		<view v-show="!isShowKeywordList">
		<!-- 热门搜索 -->
		<view class="search-hot" v-if="hasLogin&&searchHistList.length!=0">
			<view class="searchOld">
				<text>搜索历史</text>
				<image class="delete" mode="aspectFill" src="../../static/newh5/delete.png" @click.stop="delAddr()">
				</image>
			</view>
			<view class="tag-view">
				<view class="item" @click="handleSearch(item.keyWords)" v-for="(item,index) in searchHistList"
					:key="index" :circle="true" v-show="index<7?true:isHide">{{item.keyWords}}</view>
				<view class="cycle" v-show="!isHide">
					<image src="../../static/newh5/down.png" class="yticon" @click="openTags"
						style="width: 19px;height: 10px;"></image>
				</view>
				<view class="cycle" v-show="isHide">
					<image src="../../static/newh5/up.png" class="yticon" @click="openTags"
						style="width: 19px;height: 10px;"></image>
				</view>
			</view>
		</view>
		<view class="search-hot">
<!--			<view class="searchBox">-->
<!--				<image src="../../static/newh5/king.png" style="width: 22px;height: 20px" />-->
<!--				<text class="hotText">热搜榜</text>-->
<!--			</view>-->
      <view style="margin-bottom: 8px;margin-top: 20px;">
        商品1
      </view>
			<view class="tag-view">

				<view class="typeItem" @click="handleSearch(item.hotKeyWords)" v-for="(item,index) in hotGoodsList"
					:key="index" :circle="true">{{item.hotKeyWords}}
        </view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import {
		goback
	} from "@/common/utils/navigateBack.js";
	import {
		hotWordsData
	} from '../../api/index/index.js';
	import {
		goodSearchHishory,
		getHotGoods,
		deleteSearchHishory,
		getRelativeWords
	} from '../../api/search/search.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				searchValue: '',
				//记录搜索记录关键词
				isRecordKey: false,
				isHide: false,
				searchAll: [],
				searchHistList: [],
				hotGoodsList: [],
				tags: [],
				cabinet_id: '',
				params: {
					order_type: 1,
					cabinet_id: '',
					supplier_id: ''
				},
				cname: '',
				type: 0,
				name: '',
				// 关联搜索展示
				isShowKeywordList: false,
				// 联想词列表
				keywordList:[]
			}
		},
		onShow() {
			if (this.hasLogin) this.goodSearchHishory();
			// this.getHotGoods()
		},
		onLoad(op) {
			if (op.type == 1) {
				this.params.order_type = 2;
				if (op.list == 2) {
					this.type = 2;
				}
			}
			if (op.cabinet_id) {
				this.params.cabinet_id = op.cabinet_id;
				this.cname = op.cname;
				this.params.order_type = 2;
			}
			if (op.supplier_id) {
				this.params.supplier_id = op.supplier_id;
				this.name = op.name;
			}
			if (op.k) {
				this.searchValue = op.k
			}
			const this_ = this;
			uni.getStorage({
				key: 'searchAll_key',
				success: res => {
					this_.searchAll = res.data;
				}
			})
			if (this.hasLogin) this.goodSearchHishory();
			this.getHotGoods()
			// this.getTags();
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			//监听输入
			inputChange(event) {
				//兼容引入组件时传入参数情况
				var keyword = event.detail ? event.detail.value : event;
				if (!keyword) {
					this.keywordList = [];
					this.isShowKeywordList = false;
					return;
				}
				this.isShowKeywordList = true;
				this.loadRelativeWords()
			},
			loadRelativeWords() {
				getRelativeWords({
					inputWord: this.searchValue
				}).then(res => {
					console.log(res)
					if (res.code === 0) {
						this.keywordList = this.drawCorrelativeKeyword(res.data, this.searchValue);
					}
				})
			},
			//高亮关键字
			drawCorrelativeKeyword(keywords, keyword) {
				var len = keywords.length,
					keywordArr = [];
				for (var i = 0; i < len; i++) {
					var row = keywords[i];
					//定义高亮#9f9f9f
					var html = row.replace(keyword, "<span style='color: #f5222d;'>" + keyword + "</span>");
					html = '<div>' + html + '</div>';
					var tmpObj = {
						keyword: row,
						htmlStr: html
					};
					keywordArr.push(tmpObj)
				}
				return keywordArr;
			},
			//顶置关键字
			setKeyword(keyword) {
				if (keyword) {
					this.searchValue = keyword;
					this.searchFun(1)
				}
			},
			//搜索热词 *接口缺失
			getTags() {
				hotWordsData(this.params).then(res => {
					if (res.data.status) {
						if (res.data.data.hot_words.length > 0) {
							this.tags = res.data.data.hot_words;
						}
					}
				})
			},
			delAddr() {
				deleteSearchHishory().then(res => {
					if (res.code == 0) {
						console.log('res', res.data);
						this.$util.msg('删除成功')
						this.goodSearchHishory()
					}
				})
			},
			goodSearchHishory() {
				goodSearchHishory({
					page: 1,
					limit: 10
				}).then(res => {
					if (res.code == 0) {
						console.log('res', res.data);
						this.searchHistList = JSON.parse(JSON.stringify(res.data))

					}
				})
			},
			getHotGoods() {
				getHotGoods({
					page: 1,
					limit: 10
				}).then(res => {
					if (res.code == 0) {
						console.log('res', res.data);
						this.hotGoodsList = res.data.records

					}
				})
			},
			clearSearchKey() {
				this.searchAll = [];
				const this_ = this;
				uni.setStorage({
					key: 'searchAll_key',
					data: this_.searchAll

				})
			},
			openTags() {
				this.isHide = !this.isHide
			},
			handleSearch(search_key) {
				this.searchValue = search_key;
				//点击标签进入时不需要记录 商品踪迹
				this.searchFun(2);
			},
			delSearchKey(item) {
				this.searchAll.forEach((v, k) => {
					if (v == item) {
						this.searchAll.splice(k, 1);
					}
				})
				const this_ = this;
				uni.setStorage({
					key: 'searchAll_key',
					data: this_.searchAll
				})
			},
			returnIndex() {
				// uni.navigateBack();
				goback()

			},
			searchFun(type) {
				type == 1 ? this.isRecordKey = true : this.isRecordKey = false
				if (this.searchValue != '') {
					if (this.searchAll.indexOf(this.searchValue) !== -1) {
						this.searchAll.splice(this.searchAll.indexOf(this.searchValue), 1);
					}
					this.searchAll.unshift(this.searchValue);
				}
				const this_ = this;
				uni.setStorage({
					key: 'searchAll_key',
					data: this_.searchAll,
					success: () => {
						if (this_.params.order_type == 2) {
							if (this.type == 2) {
								uni.navigateTo({
									url: `/pages/cabinets/cabinets?k=${this_.searchValue}`
								})
							} else {
								uni.navigateTo({
									url: `/pages/cabinets/list?k=${this_.searchValue}&cname=${this.cname}&cid=${this.params.cabinet_id}`
								})
							}
						} else {
							// getApp().globalData.needRefresh = 1
							getApp().globalData.needRefresh = 0
							let url = this.params.supplier_id ?
								`/pages/emall/emall?k=${this_.searchValue}&id=${this.params.supplier_id}&name=${this.name}` :
								`/pages/product/list?k=${this_.searchValue}&isRecordKey=${this.isRecordKey}`;
							uni.redirectTo({
								url: url
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.my-navbar {
			position: fixed;
			top: var(--status-bar-height);
			z-index: 12;
			display: flex;
			align-items: center;
			height: 88rpx;
			padding: 14rpx 24rpx;
			justify-content: space-around;
			width: 100%;

			&>image {
				width: 26rpx;
				height: 46rpx;
			}

			.cancelBox {
				flex: 1;
				z-index: 999;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #646464;
			}

			.search-input {
				width: 600rpx;
				height: 60rpx;
				background: $my-bg-color-grey;
				border-radius: 60rpx;
				// margin-left: 24rpx;
				font-size: $my-font-size-base;

				&::before {
					content: " ";
					display: inline-block;
					width: 33rpx;
					height: 33rpx;
					position: relative;
					top: 14rpx;
					left: 20rpx;
					background: url(../../static/search-icon.png) no-repeat;
					background-size: contain;
				}

				input {
					position: relative;
					top: -30rpx;
					left: 66rpx;
					color: $my-text-color-base;
					font-size: $my-font-size-base;
				}
			}
		}


		.search-hot {
			margin-top: 20rpx;
			position: relative;
			top: 88rpx;
			padding: 0 30rpx 12rpx;

			.searchBox {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 88rpx;
				background-image: linear-gradient(180deg, #FFF2E8 0%, #FFFFFF 100%);

				.hotText {
					padding: 0 10rpx;
					// color: linear-gradient(180deg, #FF7A45  100%, #FF4D4F  100%);
					color: #FF7A45;
				}
			}

			.searchOld {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.delete {
					width: 40upx;
					height: 40upx;
					margin-left: 16upx;
				}
			}

			&>text {
				display: block;
				color: $my-text-color-grey;
				font-size: $my-font-size-base;
				margin: 25rpx 0;
			}

			.tag-view {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;

				.item {
					margin-bottom: 20rpx;
					margin-right: 16rpx;
					background-color: #f8f8f8;
					border-width: 1rpx;
					border-style: solid;
					border-color: #f8f8f8;
					border-radius: 30rpx;
					padding: 0px 16px;
					height: 30px;
					line-height: 30px;
					font-size: $font-base;
					text-overflow: ellipsis;
					overflow: hidden;
					max-width: 100%;
					white-space: nowrap;
				}

        .typeItem {
          margin-bottom: 20rpx;
          margin-right: 16rpx;
          background-color: #f8f8f8;
          border-width: 1rpx;
          border-style: solid;
          border-color: #f8f8f8;
          //border-radius: 30rpx;
          padding: 0px 16px;
          height: 30px;
          line-height: 30px;
          font-size: $font-base;
          text-overflow: ellipsis;
          overflow: hidden;
          max-width: 100%;
          white-space: nowrap;
        }
			}
		}

		.spit-line {
			position: relative;
			top: 44px;
			height: 20rpx;
			background-color: $my-bg-color-grey;
		}

		.search-history {
			position: relative;
			top: 88rpx;
			margin: 0 30rpx;

			.search-history-title {
				height: 80rpx;
				display: flex;
				align-items: center;
				background-color: $my-bg-color;
				border-bottom: 1rpx solid $my-border-color-grey;
				font-size: $my-font-size-base;
				color: $my-text-color-grey;

				.title-right {
					display: flex;
					align-items: center;
					margin-left: auto;
					margin-right: 10rpx;

					image {
						width: 34rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: $my-font-size-sm;
						color: $my-text-color-grey;
					}
				}
			}

			.search-history-list {
				.close-history {
					width: 24rpx;
					height: 24rpx;
				}

				.uni-list-item {
					padding-left: 0;
				}
			}
		}
	}

	.keyword-list-box {
		top: 88rpx;
		position: relative;
		background-color: #fff;
	}

	.keyword-entry-tap {
		background-color: #eee;
	}

	.keyword-entry {
		width: 94%;
		height: 70upx;
		margin: 0 3%;
		font-size: $my-font-size-middle;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1upx #e7e7e7;
	}

	.keyword-entry image {
		width: 30upx;
		height: 30upx;
	}

	.keyword-entry .keyword-text,
	.keyword-entry .keyword-img {
		height: 70upx;
		display: flex;
		align-items: center;
	}

	.keyword-entry .keyword-text {
		flex: 1;
		width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.keyword-entry .keyword-img {
		width: 45rpx;
		justify-content: center;
	}
</style>
